<template>
  <div class="enterprise-list">
    <Divider />
    <h3 class="title">推送目标企业</h3>
    <div class="mb-10" v-if="type === 'examine'">
      <Button type="primary" icon="md-brush" @click="onEdit">编辑</Button>
    </div>

    <Modal v-model="modalValue" width="960" title="指派目标企业" :mask-closable="false">
      <EnterpriseModal
        class="com-show-input-border"
        tips="默认为系统置顶，也可以用户选择多个目标企业。非必填"
        ref="enterpriseModal"
        :busiInfoId="busiInfoId"
      />
      <Row slot="footer" type="flex" justify="center">
        <BtnPlain type="primary" @click="modalValue = false">取消</BtnPlain>
        <Button type="primary" @click="onConfirm">确认</Button>
      </Row>
    </Modal>

    <div class="mb-20" v-for="(item, index) in busiIndustryAssignList" :key="item.companyId">
      <Row justify="space-between" align="middle" class="mb-10">
        <h4>{{ item.industryName }}</h4>
        <div v-if="type === 'examine'">
          <BtnPlain type="error" @click="onBatchDel(index)">删除</BtnPlain>
        </div>
      </Row>
      <Table :columns="columns" :data="item.busiIndustryCompanyList">
        <template slot-scope="scope" slot="action" v-if="type === 'examine'">
          <BtnText type="error" @BtnClick="onDel(index, scope.index)">删除</BtnText>
        </template>
      </Table>
    </div>
  </div>
</template>

<script>
import EnterpriseModal from './enterpriseModal.vue'
export default {
  name: 'enterpriseList',
  components: { EnterpriseModal },
  props: {
    initData: {
      type: Array,
      default: () => []
    },
    busiInfoId: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'view'
    },
  },
  watch: {
    initData: {
      immediate: true,
      handler (val) {
        if (val && val.length) {
          this.busiIndustryAssignList = val
        }
      }
    }
  },
  data () {
    return {
      columns: [
        {
          title: '公司名称',
          key: 'companyName',
          minWidth: 300,
          tooltip: true
        },
        {
          title: '推送方式',
          key: 'notificationWayName',
          minWidth: 120,
        },
        {
          title: '操作',
          slot: 'action',
          width: 100,
          align: 'center'
        },
      ],
      listData: [],
      modalValue: false,
      busiIndustryAssignList: []
    }
  },
  methods: {
    onEdit () {
      this.modalValue = true
      this.$refs.enterpriseModal.init(this.busiIndustryAssignList)
    },
    onBatchDel (index) {
      this.busiIndustryAssignList.splice(index, 1)
    },
    onDel (index, i) {
      if (this.busiIndustryAssignList[index].busiIndustryCompanyList.length === 1) {
        this.onBatchDel(index)
        return
      }
      console.log(index, i);

      this.busiIndustryAssignList[index].busiIndustryCompanyList.splice(i, 1)
    },
    onConfirm () {
      this.modalValue = false
      this.busiIndustryAssignList = this.$refs.enterpriseModal.getData()
    },
    getData () {
      return this.busiIndustryAssignList
    }
  }
}
</script>

<style lang='less' scoped>
.enterprise-list {
  .title {
    margin: 20px 0;
  }
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-10 {
  margin-bottom: 10px;
}
</style>
